<template>
  <div class="get-coupon-success">
    <navBar :title="headerTitle"></navBar>
    <div class="main">
      <div class="success">
        <img src="/img/79.png" alt />
        <span>恭喜您!</span>
        <h5>兑换优惠券成功</h5>
      </div>
      <div class="coupon-list">
        <div class="coupon">
          <div class="coupon-top">
            <div class="coupon-top-left">
              <div>
                <h5 class="coupon-title">{{coupon.title}}</h5>
              </div>
              <div class="coupon-tag">
                <span class="coupon-tag-info">{{coupon.tips}}</span>
              </div>
              <div class="coupon-time">
                <span class="pad-r5">有效期:</span>
                <span class="pad-r5">{{coupon.createTime}}</span>
                <span>-{{coupon.endTime}}</span>
              </div>
            </div>
            <div class="coupon-top-right">
              <span class="units">&yen;</span>
              <span>{{coupon.price}}</span>
            </div>
          </div>
          <div class="coupon-bottom">
            <span>{{coupon.info}}</span>
          </div>
        </div>
      </div>
      <van-button type="default" class="exchange" @click="handleSubmit">立即使用</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Field, Cell, CellGroup, Button } from "vant";
Vue.use(Field)
  .use(Cell)
  .use(CellGroup)
  .use(Button);
export default {
  data() {
    return {
      headerTitle: "优惠券领取成功",
      coupon: {
        title: "海鲜水产20元券",
        tips: "仅限海鲜水产类使用",
        createTime: "2019.06.21",
        endTime: "2019.07.04",
        price: "20",
        info: "指定商品满99.00元减20.00元"
      }
    };
  },
  components: { navBar },
  methods: {
    handleSubmit() {}
  }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.get-coupon-success {
  height: 100vh;
  padding-top: 50px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  .main {
    .success {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 375px;
      height: 173px;
      background: rgba(1, 47, 64, 1);
      img {
        margin: 22px 0px 21px;
        height: 53px;
        width: 53px;
      }
      span {
        padding-bottom: 7px;
        font-size: 16px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      h5 {
        font-size: 20px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
    .coupon-list {
      display: flex;
      justify-content: space-around;
      padding-top: 10px;
      box-sizing: border-box;
      .coupon {
        width: 358px;
        height: 123px;
        padding: 10px 11px;
        box-sizing: border-box;
        background: url(/img/26.png) no-repeat center center;
        background-size: 100%;
        .coupon-top {
          display: flex;
          justify-content: space-between;
          .coupon-top-left {
            .coupon-title {
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(48, 48, 48, 1);
              padding-bottom: 4px;
            }
            .coupon-tag {
              position: relative;
              width: 100px;
              height: 14px;
              background: linear-gradient(
                137deg,
                rgba(254, 102, 118, 1) 0%,
                rgba(244, 138, 152, 1) 100%
              );
              border-radius: 0px 7px 0px 7px;

              .coupon-tag-info {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100px;
                height: 14px;
                text-align: center;
                transform: translate(-50%, -50%);
                font-size: 9px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
              }
            }
            .coupon-time {
              padding-top: 12px;
              font-size: 11px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
          }
          .coupon-top-right {
            font-size: 35px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(253, 106, 122, 1);
            .units {
              font-size: 14px;
            }
          }
        }
        .coupon-bottom {
          display: flex;
          justify-content: space-between;
          padding-top: 26px;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          .coupon-use {
            a {
              text-decoration: none;
              font-size: 11px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(22, 89, 139, 1);
            }
          }
        }
      }
    }
    .exchange {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.van-button--default {
  width: 333px;
  height: 41px;
  background: linear-gradient(
    90deg,
    rgba(1, 47, 64, 1) 0%,
    rgba(1, 47, 64, 1) 100%
  );
}
.van-button__text {
  width: 115px;
  height: 22px;
  font-size: 15px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
}
</style>
